<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="ThemeBucket">
  <link rel="shortcut icon" href="#" type="image/png">

  <title>个人中心</title>


  {css href="/static/layout/css/style.css" }
  {css href="/static/layout/css/style-responsive.css" }
  {css href="/static/css/toastr.min.css"}
  <link rel="stylesheet" href="/static/css/index.css">
  <link rel="stylesheet" href="/static/css/personal.css">

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
  <script src="js/respond.min.js"></script>
  <![endif]-->
  <style>
  .newslist{margin-left:150px;padding:0px;margin-top:30px;}
  .newslist li{list-style:none;float:left;width:150px;overflow:hidden;text-overflow:ellipsis;margin-left:40px;}
  </style>
</head>

<body class="horizontal-menu-page" style="background: #fff;">

<section>

    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="{:url('index/Index/index')}">
                    <img src="/static/index/images/logo.png" height="42px">
                </a>
            </div>


            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="{:url('index/Index/index')}">首页</a></li>
                    <li><a href="{:url('index/Category/index')}?where=0">分类 </a></li>
                    <li><a href="{:url('index/Category/rank',['id'=>0])}">榜单 </a></li>
                    <li><a href="{:url('index/Register/registerauthor')}">成为作者</a></li>
                    <li><a href="{:url('index/Author/index')}">作者专区</a></li>
                </ul>

                  <ul class="nav navbar-nav navbar-right" style="margin-right:100px;">
                    <li>
                        <form class="navbar-form navbar-left" role="search" action="{:url('index/Index/find')}" method="post">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Search" name="search">&nbsp;
                                <button class="btn btn-info ">搜索</button>
                            </div>
                        </form>
                    </li>

                    {if ( empty($Think.session.user) && empty($Think.cookie.loginid) )}
                    <li class="dropdown">
                        <a href="{:url('index/Register/index')}">注册</a> <b lass="caret"></b>
                    </li>
                    <li><a type="button" data-toggle="modal" data-target=".bs-example-modal-sm">登陆</a>

                        <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog"
                             aria-labelledby="mySmallModalLabel">
                            <div class="modal-dialog modal-sm" role="document">
                                <div class="modal-content" style="margin-top: 250px;">
                                    <form action="{:url('index/Login/login')}" method="post">
                                        <!-- <img src="" alt=""> -->
                                        <input type="text" class="form-control" name="tel" autocomplete="off" maxlength="11" placeholder="账号">
                                        <input type="password" class="form-control" name="pass" autocomplete="off" placeholder="密码">
                                        <div class="form-group">
                                            <div class="col-sm-10">
                                                <div class="checkbox">
                                                    <label>
                                                        <input type="checkbox" name="checkbox">记住密码
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-default btn-lg btn-block">登陆</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </li>
                    {else/}
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                          {if empty($Think.session.user.icon) && empty($Think.cookie.loginicon)}
                             <img src="/static/images/details/10.jpg">
                          {else/} 
                          <img src="{$Think.session.user? $Think.session.user.icon : $Think.cookie.loginicon}">
                          {/if}
                            {$Think.session.user? $Think.session.user.name : $Think.cookie.loginname} 
                            <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="{:url('index/BookShelf/index')}">我的书架
                            <li><a href="{:url('index/Personal/index',['id'=>$Think.session.user? $Think.session.user.id : $Think.cookie.loginid])}">我的账号</a></li>
                            <li><a href="{:url('index/Login/logout')}">注销</a></li>
                        </ul>
                    </li>
                    {/if}
                    <li><a href="{:url('index/BuyCar/read',['id'=>$Think.session.user? $Think.session.user.id : $Think.cookie.loginid])}">购物车 ({$count})</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="personal">
        <div class="top">
          个人设置
        </div>
        <div class="right">
          <h3><span></span>个人资料</h3>
          <ul class="rightlist">
            <li>基本资料</li>
            <div class="info">
              <div class="title">基本资料</div>
              <form  method="post" id="myinfo">
                <input type="hidden" name="id" value="{$user.id}">
                <div class="form-group" style="margin-top:20px;">
                  <label for="exampleInputEmail1">昵称</label>
                  <input type="text" class="form-control" placeholder="Enter New Name" name="name" value="{$user.name}" autocomplete="off">
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">电话</label>
                  <input type="text" class="form-control" placeholder="Enter New Tel" name="tel" value="{$user.tel}" autocomplete="off" maxlength="11">
                </div>
                <div class="form-group" style="margin-top:20px;">
                 <label for="exampleInputPassword1">性别</label>
                 <select class="form-control" name="sex">
                  <option value="0" {$user.sex==0?'selected':''}>女</option>
                  <option value="1" {$user.sex==1?'selected':''}>男</option>
                 </select>
                </div>
              </form>
               <button class="btn btn-default saveinfo" style="margin-top:-255px;">保存修改</button>
            </div>
            <li>修改密码</li>
            <div class="info">
              <div class="title">修改密码</div>
              <form method="post" id="changepwd">
                <input type="hidden" name="id" value="{$user.id}">
                <div class="form-group" style="margin-top:20px;width:400px;">
                  <label for="exampleInputEmail1">新密码</label>
                  <input type="password" class="form-control" name="password" value="" placeholder="新密码" autocomplete="off">
                </div>
                <span class="telpwd" style="display:block;margin-top:37px;">请输入6-12位由数字，字母，下划线组成的密码</span>
                <div class="form-group" style="width:400px;margin-top:10px;">
                  <label for="exampleInputEmail1">确认密码</label>
                  <input type="password" class="form-control"  name="repassword" value="" placeholder="确认密码" autocomplete="off">
                </div>
                <span class="retel" style="display:block;margin-top:37px;"></span>
              </form>
              <button class="btn btn-default savepwd" style="margin-top:-255px;">保存修改</button>
            </div>
            <li>头像设置</li>
            <div class="info">
                <div class="title">设置头像</div>
                <form method="post" enctype="multipart/form-data" id="cmt-form">
                  <input type="hidden" name="id" value="{$user.id}"><br>
                  <p class="pass-portrain-commonp">方法一：选择本地照片，上传编辑自己的头像</p>
                  <span class="sl-custom-file">
                      <input type="button" value="选择图片" class="btn-file"/>
                      <input type="file" id="usericon" class="ui-input-file" name="icon" data-id="{$user.id}"/>
                  </span>
                  <span class="pass-portrait-msg">支持jpg、jpeg、gif、png、bmp格式的图片</span>
                  <!-- <p class="clearicon" style="margin-top:-15px;" onclick="clearMethod1();">清除已选头像</p> -->
                  <p class="pass-portrain-commonp">方法二：选择推荐头像，快速上传优质头像</p>
                  <ul id="iconlist">
                    <li><img src="/static/images/details/1.jpg"></li>
                    <li><img src="/static/images/details/2.jpg"></li>
                    <li><img src="/static/images/details/3.jpg"></li>
                    <li><img src="/static/images/details/4.jpg"></li>
                    <li><img src="/static/images/details/5.jpg"></li>
                  </ul>
                <div id="see">
                  <p style="position:relative;top:-35px;right:0px;">头像预览</p>
                  {if empty($Think.session.user.icon) && empty($Think.cookie.loginicon)}
                      <span class="big"><img src="/static/images/details/10.jpg" width="100px" height="100px"></span>
                  {else/}
                  <span class="big"><img src="{$user.icon}" width="100px" height="100px"></span>
                  {/if}
                  <p class="small">大头像100*100</p>
                  {if empty($Think.session.user.icon) && empty($Think.cookie.loginicon)}
                      <span class="big"><img src="/static/images/details/10.jpg" width="50px" height="50px"></span>
                  {else/}
                  <span class="big" style="margin-top:25px;"><img src="{$user.icon}" width="50px" height="50px"></span>
                  {/if}
                   <p class="small">小头像50*50</p>
                </div>
                </form>
                <button class="btn btn-default icon" style="margin-top:-310px;">保存头像</button>
            </div>
          </ul>
        </div>
        <div class="myinfo">
            <div class="title">基本资料</div>
            <form  method="post" id="myinfo">
                <input type="hidden" name="id" value="{$user.id}">
                <div class="form-group" style="margin-top:20px;">
                  <label for="exampleInputEmail1">昵称</label>
                  <input type="text" class="form-control" placeholder="Enter New Name" name="name" value="{$user.name}" autocomplete="off">
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">电话</label>
                  <input type="text" class="form-control" placeholder="Enter New Tel" name="tel" value="{$user.tel}" autocomplete="off" maxlength="11">
                </div>
                <div class="form-group" style="margin-top:20px;">
                 <label for="exampleInputPassword1">性别</label>
                 <select class="form-control" name="sex">
                  <option value="0" {$user.sex==0?'selected':''}>女</option>
                  <option value="1" {$user.sex==1?'selected':''}>男</option>
                 </select>
                </div>
              </form>
               <button class="btn btn-default saveinfo" style="margin-top:-255px;">保存修改</button>
        </div>
    </div>
    <b style="font-size:22px;font-weight:normal;position:relative;left:185px;top:20px;">热点新闻</b>
    <ul class="newslist">
      {foreach $newslist as $vo}
      <li>
        <a href="{$vo->url}"><img src="{$vo->picUrl}"></a>
        <p>{$vo->ctime}</p>
        <a href="{$vo->url}">{$vo->title}</a>
        <p>{$vo->description}</p>
      </li>
      {/foreach}
    </ul>
    <!--footer section start-->
    <!-- <footer class="sticky-footer"> -->
    <footer style="border:0;font-size: 16px;clear:both;border-top:1px solid #e9eae9;">
        <div class="row">
            <div class="ft-box center">
                <div class="col-md-3">
                    <div class="ft-icon ft-icon1"></div>
                    <p class="mgt10">正版电子书</p>
                </div>
                <div class="col-md-3">
                    <div class="ft-icon ft-icon2"></div>
                    <p class="mgt10">多平台畅读</p>
                </div>
                <div class="col-md-3">
                    <div class="ft-icon ft-icon3"></div>
                    <p class="mgt10">海量图书资源</p>
                </div>
                <div class="col-md-3">
                    <div class="ft-icon ft-icon4"></div>
                    <p class="mgt10">优质阅读体验</p>
                </div>
                <div style="clear:both"></div>
            </div>


            <div class="ft-link">
                <dl class="col-md-4">
                    <dt>帮助</dt>
                    <dd><a href="">如何购买图书</a></dd>
                    <dd><a href="">常见问题</a></dd>
                    <dd><a href="">支付方式</a></dd>
                </dl>
                <dl class="col-md-4">
                    <dt>平台入驻</dt>
                    <dd><a href="">机构专区</a></dd>
                    <dd><a href="">个人作者专区</a></dd>
                </dl>
                <dl class="col-md-4">
                    <dt>投诉与建议</dt>
                    <dd><a href="">问题反馈</a></dd>
                </dl>
            </div>

        </div>
    </footer>


    <!--footer section end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
{js href="/static/layout/js/jquery-1.10.2.min.js" }
{js href="/static/layout/js/jquery-ui-1.9.2.custom.min.js" }
{js href="/static/layout/js/jquery-migrate-1.2.1.min.js" }
{js href="/static/layout/js/bootstrap.min.js" }
{js href="/static/layout/js/modernizr.min.js" }
{js href="/static/layout/js/jquery.nicescroll.js" }
{js href="/static/js/toastr.min.js"}
<!--common scripts for all pages-->
{js href="/static/layout/js/scripts.js"}
<script>
        
  $('.rightlist li').click(function(){
      // 设置弹框参数
        toastr.options = {
            closeButton: true,// 是否显示关闭按钮
            progressBar: true,// 实现显示计时条
            timeOut: "3000",  // 自动关闭时间
            positionClass: "toast-top-right" // 提示位置
            // toast-top-full-width 顶端，宽度铺满整个屏幕
            // toast-top-right  顶端右边
        };

      $('.myinfo').html($(this).next('div').html());

      //头像
      $('#iconlist li img').click(function(){
         var cion = $(this).attr('src');
          $('.big img').attr('src',cion);
       });
      
      //鼠标移上去事件
       $('#iconlist li img').mouseover(function(){
        $(this).css({border:'1px solid red'});
       }) ;
      //鼠标移出事件
       $('#iconlist li img').mouseout(function(){
        $(this).css({border:'none'});
       }) ;

       $('#iconlist li img').click(function(){
          var pro = $(this).attr('src');
          if(pro){
               $(".ui-input-file").click(function(){
                  $('.big img').attr('src',pro);
                  $(this).removeAttr('type');
                  toastr.error("你已经选择了图片,不能重复选", 'FBI WARING:');
             });
          }
           $('.icon').click(function () {
            ajaxIcon(pro);
         });
       });
 
       $(".ui-input-file").change(function(){
          if($(this)[0].files[0]['name']){
             $('#iconlist li img').click(function(){
             $('.big img').attr('src','{$user.icon}');
              toastr.error("你已经选择了图片,不能重复选", 'FBI WARING:');
             });
          
              $('#iconlist li img').mouseover(function(){
              $(this).css({border:'none'});
              }) ;

              $('.icon').click(function () {
              var formData = new FormData();
              var id = $(".ui-input-file").attr('data-id');
              formData.append("file",$(".ui-input-file")[1].files[0]);
              formData.append("id",id);
              $('#cmt-form').submit(CommentIcon(formData));
             });

             // $('.clearicon').click(function(){
             //      $(".ui-input-file")[1].files[0]['name'];
             //      toastr.error("清除成功,请选择你的头像", 'FBI WARING:');
             //    });
          }
       });

       $('.saveinfo').click(function () {
            var data = $('#myinfo').serialize();
            $('#myinfo').submit(changemyinfo(data));
        });

      
       $('input[name="password"]').blur(function(){
           var data = $(this).val();
           if(data.match(/^(\d|\w){6,12}$/) === null){
               $('.telpwd').html('格式不正确,请重新输入');
               $('.telpwd').css({color:'red'});
           }else{
               $('.telpwd').html('√ 输入正确');
               $('.telpwd').css({color:'green'});
           }
           if(!data){
               $('.retel').html('请输入您的新密码');
               $('.retel').css({color:'red'});
           }
          $('input[name="repassword"]').blur(function(){
           var data1 = $(this).val();
           if(data1 != data){
               $('.retel').html('两次密码不一致,请重新输入');
               $('.retel').css({color:'red'});
               
           }else{
               if(!data1){
               $('.retel').html('请输入您的新密码');
               $('.retel').css({color:'red'});
               }else{
                $('.retel').html('√ 输入正确');
                $('.retel').css({color:'green'});
               }
           }
        });
        });


        $('input[name="password"]').focus(function(){
            $('.telpwd').html('请输入6-12位由数字，字母，下划线组成的密码');
            $('.telpwd').css({color:'green'});
            $('.retel').html('');
            $('.retel').css({color:'red'});
        });

         $('.savepwd').click(function () {
            var data = $('#changepwd').serialize();
            $('#changepwd').submit(changepwd(data));
        });


    });//总
    function ajaxIcon(data){
        $.ajax({
                data:{'pro':data},
                type: 'post',
                url: '/aicon/',
                dataType:'json',
                success: function (data) {
                    if (data.status) {
                        toastr.success(data.info);
                    } else {
                        toastr.error(data.info, 'FBI WARING:');
                    }
                },
                error: function () {
                    toastr.error(data.info, 'FBI WARING:');
                }
            });
    }


    function CommentIcon(data) {
            $.ajax({
                data:data,
                type: 'post',
                url: '/changeicon/',
                processData : false, 
                // 告诉jQuery不要去设置Content-Type请求头
                contentType : false,
                success: function (data) {
                    if (data.status) {
                        toastr.success(data.info);
                    } else {
                        toastr.error(data.info, 'FBI WARING:');
                    }
                },
                error: function () {
                    toastr.error(data.info, 'FBI WARING:');
                }
            });
        }
    
    function Comment(data) {
            $.ajax({
                data:data,
                type: 'post',
                url: '/changeicon/',
                dataType:'json',
                success: function (data) {
                    if (data.status) {
                        toastr.success(data.info);
                    } else {
                        toastr.error(data.info, 'FBI WARING:');
                    }
                },
                error: function () {
                    toastr.error(data.info, 'FBI WARING:');
                }
            });
        }

        function changemyinfo(data) {
            $.ajax({
                data:data,
                type: 'post',
                url: '/myinfo/',
                dataType:'json',
                success: function (data) {
                    if (data.status) {
                        toastr.success(data.info);
                    } else {
                        toastr.error(data.info, 'FBI WARING:');
                    }
                },
                error: function () {
                    toastr.error(data.info, 'FBI WARING:');;
                }
            });
        }

        function changepwd(data) {
            $.ajax({
                data:data,
                type: 'post',
                url: '/mypassword/',
                dataType:'json',
                success: function (data) {
                    if(data.status) {
                        toastr.success(data.info);
                    } else {
                        toastr.error(data.info, 'FBI WARING:');
                    }
                },
                error: function () {
                    toastr.error(data.info, 'FBI WARING:');
                }
            });
        }

        // function clearMethod1() 
        // { 
        //   var file = document.getElementById('usericon').value;
        //   console.log(file);
        //   file.value = ''; 
        //   alert(1111);
        // }
</script>
</body>
</html>
